<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="import" href="view/header.html">
		<style>

			body {
				background: url(images/login.png) center center no-repeat;
				background-size: auto;
				/* margin: auto; */
			}
			
			.mui-content{
				background: rgba(255, 255, 255, 0)!important;
				margin-top: 5%;
			}
			
			
			#title_img{			
				text-align: center;
			}
			#title{
				line-height: 60px;
				height: 60px;
				text-align: center;
				font-family:"微软雅黑";
				margin-bottom: 30px;
				font-size: 20px;
			}
			.border{
				 border:0px solid red;
			}
			.border_radius{
				margin-bottom: 20px;
				border-radius:30px;
			}
			
			.border_radius .mui-input-row{
				background: #fff;
				padding: 7.5px;
			}
			
			.mui-content-padded{
				margin: 30px;
			}
			
			.mui-btn-success{
				background: #2dbb55;
				border-color: #2dbb55;
			}
		</style>

	</head>

	<body>
		<div class="mui-content" id="rrapp" v-cloak>
			<div id="title_img" class="border">
				<image src="images/LOGO@2x.png" width="60px">
			</div>
			<div id="title" class="border">
				<b>永修高标准农田信息化平台</b>
			</div>
			
			<div class="mui-content-padded border_radius">
				<form id='login-form' class="">
					<div class="mui-input-row border_radius">
						<label style="width: 15%;"><span class="mui-icon-extra mui-icon-extra-people" style="font-size: 18px;"></span> </label>
						<input style="border-radius: 0px 30px 30px 0px;width: 80%;" id='account' type="text" class="mui-input-clear mui-input" v-model="zhanghao" placeholder="请输入用户名">
					</div>
					<div class="mui-input-row border_radius">
						<label style="width: 15%;"><span class="mui-icon mui-icon-locked" style="font-size: 18px;"></span> </label>
						<input style="border-radius: 0px 30px 30px 0px;width: 80%;" id='password' type="password" class="mui-input-clear mui-input" v-model="mima" placeholder="请输入密码">
					</div>
				</form>
			
				<button id='login' class="mui-btn mui-btn-block mui-btn-success border_radius" @click="login">登录</button>
			</div>

		</div>

		<script>
			mui.init({
				statusBarBackground: '#f7f7f7',
				swipeBack:true //启用右滑关闭功能
			});

			mui.plusReady(function() {
				//读取本地存储，检查是否为首次启动
				var showGuide = plus.storage.getItem("lauchFlag");
				//仅支持竖屏显示
				plus.screen.lockOrientation("portrait-primary");
				plus.navigator.closeSplashscreen();
				plus.navigator.setFullscreen(false);
			});

			var vm = new Vue({
				el: '#rrapp',
				data: {
					zhanghao: null,
					mima: null,
				},
				methods: {
					login: function() {
						mui.ajax(baseUrl + '/sys/login1', {
							data: {
								// "username": vm.zhanghao,
								// "password": vm.mima,
								"username": "admin",
								"password": "admin",
							},
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 15000, //超时时间设置为10秒；
							success: function(result) {
								//服务器返回响应，根据响应结果，分析是否登录成功；
								if (result.code == 0) { //登录成功
									mui.toast('登陆成功', {duration: '300',type: 'div'});
									var storage = window.localStorage;
									//写入token字段
									storage.setItem("token",result.token);
									
									setTimeout(function(){
										//打开新窗口
										 // defOpenWindow("index","view/index.html");
										 mui.openWindow("view/index.html","index");
										 
									 },300);
								} else {
									mui.toast(result.msg, {duration: 'long',type: 'div'});
								}
							}
						});
					},
				},
			});
		</script>
	</body>

</html>
